---
import { slugify } from "../../functions/slugify";
import Main from "../../layouts/main.astro";
import { getCollection } from "astro:content";

// Get all the remote plugins
const fetchReg = await fetch("https://registry.anyquery.dev/v0/registry/", {
    headers: {
        "Content-Type": "application/json",
    },
});

type apiResponse = {
    plugins: [
        {
            name: string;
            display_name: string;
            description: string;
            icon: string;
            type: string;
            author: string;
        },
    ];
};

const allPlugins: apiResponse = await fetchReg.json();

// Sort the plugins by name
allPlugins.plugins.sort((a, b) => a.display_name.localeCompare(b.display_name));

const remotePlugins = allPlugins.plugins.filter((plugin) => {
    // Filter out test plugins that start with "sample"
    return plugin.type === "anyquery" && !plugin.name.startsWith("sample");
});

const libraryPlugins = allPlugins.plugins.filter((plugin) => {
    return plugin.type === "sharedObject";
});

// Get all the integrations guides
const integrations = await getCollection("integrations");

// Get all the databases
const databases = await getCollection("databases");

// Get all the chats
const chats = await getCollection("chats");
---

<Main
    title="Integrations - Anyquery"
    footnote="Trademarks are the property of their respective owners. Anyquery is not affiliated with any of the companies or projects mentioned."
>
    <h1 class="text-3xl" id="databases">Databases</h1>
    <p class="break-words text-sm text-white/60 mt-1">
        Using Anyquery, you can connect to a variety of databases. Insert data,
        join tables across databases, and more (starting from version 0.3.0 in
        beta).
    </p>
    <div
        class="grid lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-4 mt-3"
    >
        {
            databases
                .sort((a, b) => a.data.name.localeCompare(b.data.name))
                .map((db) => (
                    <a
                        href={db.data.url}
                        class="flex flex-col p-4 rounded-lg bg-white/10 border border-[#655cc339]"
                    >
                        <img
                            src={db.data.icon}
                            alt={db.data.name}
                            class="max-w-10 h-10 rounded-md"
                        />
                        <h2 class="text-lg mt-3">{db.data.name}</h2>
                        <p class="break-words text-sm text-white/60">
                            {db.data.description}
                        </p>
                    </a>
                ))
        }
    </div>
    <h1 class="text-3xl mt-8" id="plugins">Plugins</h1>
    <p class="break-words text-sm text-white/60 mt-1">
        Query data from various sources, including APIs and local applications.
    </p>
    <div
        class="grid lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-4 mt-4"
    >
        {
            remotePlugins.map((plugin) => (
                <a
                    href={`/integrations/${slugify(plugin.name)}`}
                    class="block flex-col p-4 rounded-lg bg-white/10 border border-[#655cc339]"
                >
                    <img
                        src={plugin.icon}
                        alt={plugin.display_name}
                        class="max-h-10"
                    />
                    <h2 class="text-lg mt-3">{plugin.display_name}</h2>
                    <p class="break-words text-sm text-white/60">
                        {plugin.description}
                    </p>
                </a>
            ))
        }
    </div>

    <h1 class="text-3xl mt-8" id="libraries">Libraries</h1>
    <p class="break-words text-sm text-white/60 mt-1">
        Because Anyquery is based on SQLite, download and use SQLite libraries
        to extend the functionality of your queries.
    </p>
    <div
        class="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4 mt-4"
    >
        {
            libraryPlugins.map((plugin) => (
                <a
                    href={`/integrations/${slugify(plugin.name)}`}
                    class="flex flex-col p-4 rounded-lg bg-white/10 border border-[#655cc339]"
                >
                    <div class="flex gap-2 items-center mb-4">
                        <img
                            src={plugin.icon}
                            alt={plugin.author}
                            class="w-8 h-8 rounded-md"
                        />
                        <p class="text-xs text-white/60">{plugin.author}</p>
                    </div>
                    <h2 class="text-lg">{plugin.display_name}</h2>
                    <p class="break-words text-sm text-white/60 mb-2">
                        {plugin.description}
                    </p>
                </a>
            ))
        }
    </div>

    <h1 class="text-3xl mt-8" id="guides">Guides</h1>
    <p class="break-words text-sm text-white/60 mt-1">
        Guides on reusing plugins for other integrations.
    </p>
    <div
        class="grid lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-4 mt-4"
    >
        {
            integrations.map((integration) => (
                <a
                    href={`/integrations/${integration.slug}`}
                    class="flex flex-col p-4 rounded-lg bg-white/10 border border-[#655cc339]"
                >
                    <img
                        src={integration.data.icon}
                        alt={integration.data.title}
                        class="w-10 h-10"
                    />
                    <h2 class="text-lg mt-3">{integration.data.title}</h2>
                    <p class="break-words text-sm text-white/60">
                        {integration.data.description}
                    </p>
                </a>
            ))
        }
    </div>
    <h1 class="text-3xl mt-8" id="llm">LLMs</h1>
    <p class="break-words text-sm text-white/60 mt-1">
        Connect Anyquery to LLMs to chat with your data.
    </p>

    <div
        class="grid lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 gap-4 mt-4"
    >
        {
            chats.map((chat) => (
                <a
                    href={chat.data.url}
                    class="flex flex-col p-4 rounded-lg bg-white/10 border border-[#655cc339]"
                >
                    <img
                        src={chat.data.icon}
                        alt={chat.data.name}
                        class="w-10 h-10"
                    />
                    <h2 class="text-lg mt-3">{chat.data.name}</h2>
                    <p class="break-words text-sm text-white/60">
                        {chat.data.description}
                    </p>
                </a>
            ))
        }
    </div>
</Main>
